<template>
  <div class="goods">
    <!-- 查询条件 -->
    <div class="nav-link" style="margin-top: 40px" v-if="productList.length>0">
      <el-link style="margin-left: 65px" @click.prevent="handleSortWay(1,2)"><span style="color: #6c8cd4">综合排序</span>
      </el-link>
      <el-link @click.prevent="handleSortWay(2,2)"><span style="color: #6c8cd4">销量排序</span></el-link>
      <el-link @click.prevent="handleSortWay(3,1)" v-if="searchParams.sortType===2">
        <span style="color: #6c8cd4">价格
         <i class="el-icon-caret-bottom"></i>
         </span>
      </el-link>
      <el-link @click.prevent="handleSortWay(3,2)" v-if="searchParams.sortType===1">
        <span style="color: #6c8cd4">价格</span>
        <i class="el-icon-caret-top"></i>
      </el-link>
      <el-input v-model="searchParams.priceStart" type="number" placeholder="价格"
                style="width:90px;margin-left: 40px"></el-input>
      <span style="margin: 0 5px"> - </span>
      <el-input v-model="searchParams.priceEnd" type="number" placeholder="价格" style="width:90px;"></el-input>
      <el-button style="margin-left: 10px;" type="primary" @click="handleSearch"
                 :disabled="searchParams.priceStart>=searchParams.priceEnd">
        确定
      </el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
    <el-card style="margin-top: 10px;" header="" v-show="productList.length>0">
      <el-row :gutter="20">
        <div v-for="(item,index) in productList" :key="item.id">
          <el-col :span="6">
            <section class="mt20">
              <div class="hot">
                <m-goods :item="item" style="height: 340px;margin-top: 30px"></m-goods>
              </div>
            </section>
          </el-col>
        </div>
      </el-row>
      <!--分页插件-->
      <el-pagination style="padding: 32px 16px;background: #fff;float: right"
                     v-if="total>0"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :current-page.sync="searchParams.current"
                     :page-size.sync="searchParams.size"
                     :total="total" @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
    <el-empty v-if="productList.length===0" description="等待后续上架哦~">
    </el-empty>
  </div>
</template>

<script>
import productApi from '../../api/product'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { reactive, toRefs, onMounted } from 'vue'
import MGoods from '../../components/MGoods.vue'

export default {
  name: 'goods',
  components: {
    MGoods
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      // 搜索条件
      searchParams: {
        keyword: '',
        sortWay: 1,
        sortType: 2,
        productCategoryId: parseInt(route.params.productCategoryId),
        priceStart: null,
        priceEnd: null,
        current: 1,
        size: 10
      },
      // 商品服务列表
      productList: [],
      total: 0
    })
    // 商品分类id
    //---------------------method start
    // 搜索商品
    const searchProducts = () => {
      productApi.search(state.searchParams).then(res => {
        const { total, records } = res.data
        console.log(res.data)
        state.productList = records
        state.total = total
      })
    }
    // sortType排序方式，1:正序 2:倒序
    //sortWay 处理排序 排序标识，1: 综合排序，2: 销量排序，3: 价格排序
    const handleSortWay = (sortWay, sortType) => {
      state.searchParams.sortType = sortType
      state.searchParams.sortWay = 3
      initData()
    }
    // 初始化数据
    const initData = () => {
      state.searchParams.current = 1
      state.productList = []
      searchProducts()
    }

    // 处理价格查询
    const handleSearch = () => {
      searchProducts()
    }
    // 重置属性
    const resetFileds = () => {
      state.searchParams = {
        keyword: '',
        sortWay: 1,
        sortType: 2,
        productCategoryId: parseInt(route.params.productCategoryId),
        priceStart: null,
        priceEnd: null,
        current: 1,
        size: 10
      }
      state.productList = []
    }
    // 重置搜索
    const resetSearch = () => {
      resetFileds()
      searchProducts()
    }

    // 触发当前页
    const currentChange = (currentPage) => {
      // console.log('触发了currentChange', currentPage)
      state.searchParams.current = currentPage
      searchProducts()
    }
    // 触发每页显示数量
    const sizeChange = (pageSize) => {
      // console.log('触发了sizeChange', sizeChange)
      state.searchParams.size = pageSize
      searchProducts()
    }

    // 监听路由更新
    onBeforeRouteUpdate(to => {
      console.log(to.path)
      resetFileds()
      // console.log(to.params)
      let productCategoryId = to.params.productCategoryId
      let keyword = to.query.keyword
      if (productCategoryId) {
        state.searchParams.productCategoryId = parseInt(productCategoryId)
      }
      if (keyword) {
        state.searchParams.keyword = keyword
      }
      searchProducts()
    })
    //---------------------method end

    //--------------------- 钩子 start
    onMounted(() => {
      searchProducts()
    })


    //--------------------- 钩子
    return {
      ...toRefs(state),
      currentChange,
      sizeChange,
      handleSortWay,
      handleSearch,
      resetSearch
    }
  }
}
</script>

<style scoped lang="scss">
.nav-link ::v-deep .el-link {
  margin-left: 20px;
}

</style>
